<template>
  <div class="app">
    <el-container style="overflow: visible">
      <el-aside v-if="isOpen" width="220px" style="overflow: visible">
        <Aside />
      </el-aside>
      <el-container class="main">
        <el-header class="header">
          <Header @change="onOpen" />
        </el-header>
        <div style="flex: 1; height: 0">
          <router-view> </router-view>
        </div>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import Aside from "../components/Layout/Aside.vue";
import Header from "../components/Layout/Header.vue";

export default {
  name: "HomeView",
  components: {
    Aside,
    Header,
  },
  data() {
    return {
      isOpen: true,
    };
  },
  methods: {
    onOpen() {
      this.isOpen = !this.isOpen;
    },
  },


};
</script>

<style scoped>
.app {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  margin: 0px;
  padding: 0px;
  background-color: #000;
}

.el-aside {
  color: var(--el-text-color-primary);
}

.main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: scroll;
}
.header {
  width: 100%;
  padding: 0;
  background-color: #141414;
}
.el-main {
  padding: 0px;
  overflow: none;
}
</style>


